<template>
  <div class = 'container'>
    <el-form :model="articleParameter" :rules="articleRules" label-width = "100px">
      <el-form-item label = "文章标题：" prop="title">
        <el-input v-model="articleParameter.title" placeholder = "请输入文章标题"></el-input>
      </el-form-item>
      <el-form-item label = "文章内容：" prop="articleBody">
        <quill-editor v-model="articleParameter.articleBody" class="myQuillEditor" :options="editorOption" />
      </el-form-item>
      <el-form-item label = "视频地址：">
        <el-input v-model="articleParameter.videoURL" placeholder = "请输入视频地址"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: 'ArticlesAdd',
  props: {
    articleRules: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote'],
            ['code-block', 'image', 'link']
          ]
        },
        placeholder: ''
      },
      // 文章参数
      articleParameter: {
        title: '',
        articleBody: null,
        videoURL: null
      }
    }
  },
  components: {
    quillEditor
  },
  updated () {
    this.toArticle()
  },
  methods: {
    toArticle () {
      this.$emit('onArticleParameter', this.articleParameter)
    }
  }
}
</script>

<style scoped lang = 'scss'>
::v-deep .ql-editor{
  min-height:200px!important;
}
</style>
